<template>
  <div :class="['search-item', { 'show-err': !!errMessage }]" :errmsg="errMessage">
    <select-type class="mr-10" :value="value" @change="typeChange" :disabled="disabled" />
    <!-- 普通的条件判断 -->
    <el-select
      v-if="isShowCondition"
      v-model="value.condition"
      class="condtion-select"
      :disabled="disabled"
    >
      <el-option
        v-for="item in conditionOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <!-- 时间区间的判断 -->
    <el-select v-if="isShowConditionTime" v-model="value.condition" :disabled="disabled">
      <el-option
        v-for="item in conditionTimeOptions"
        class="condtion-select"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- 是否选择器单选类型 -->
    <template v-if="curFields.formType == 'select'">
      <select-comp v-model="value.value" :options="curFields.options" :disabled="disabled" />
    </template>
    <!-- 文本输入类型 -->
    <template v-else-if="curFields.formType == 'text'">
      <tag-input v-model="value.value" class="w-320" :disabled="disabled" />
    </template>

    <!-- 范围输入类型 -->
    <template v-else-if="curFields.formType == 'range'">
      <range-input :value="value.value" :disabled="disabled" />
    </template>

    <!-- 地区 选择器多选类型 -->
    <template v-else-if="curFields.field == 'area'">
      <multi
        v-model="value.value"
        class="w-320"
        :options="curFields.options"
        :disabled="disabled"
      />
    </template>
    <!-- 行业 -->
    <template v-else-if="curFields.field == 'industry'">
      <MultiIndustry
        v-model="value.value"
        class="w-320"
        :options="curFields.options"
        :disabled="disabled"
      />
    </template>
    <!-- 自带的options -->
    <template v-else-if="curFields.formType == 'checkbox'">
      <multiple-tag-select
        v-model="value.value"
        class="w-320"
        :options="curFields.options"
        :disabled="disabled"
      />
    </template>
    <!-- 时间区间 -->
    <template v-else-if="curFields.formType == 'range_date'">
      <TimeRange :value="value.value" :disabled="disabled" />
    </template>
    <!-- 检索select -->
    <template v-else-if="curFields.formType == 'searchbox'">
      <SelectSearch v-model="value.value" class="w-320" :disabled="disabled" :fieldObj="value" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { getAreaList, getIndustryList } from '@/api/ent/company/local'
import SelectType from './InputComps/SelectType.vue'
import Multi from './InputComps/Multi.vue'
import MultiIndustry from './InputComps/MultiIndustry.vue'
import TagInput from './InputComps/TagInput.vue'
import RangeInput from './InputComps/RangeInput.vue'
import SelectComp from './InputComps/Select.vue'
import { useEntStore } from '@/store/modules/ent'
import MultipleTagSelect from './InputComps/MultipleTagSelect.vue'
import TimeRange from './InputComps/TimeRange.vue'
import SelectSearch from './InputComps/SelectSearch.vue'
const entStore = useEntStore()
const props = defineProps({
  index: String,
  value: Object,
  disabled: Boolean
})
const emit = defineEmits(['updateValue'])
const advanceCondList = ref([])

const { index } = toRefs(props)
const value = ref(props.value)
const curFields = ref({})
const errMessage = ref('')
const conditionOptions = [
  { value: 'in', label: '包含任一' },
  { value: 'not_in', label: '全部不包含' },
  { value: 'match_phrase', label: '全量包含' }
]
const conditionTimeOptions = [
  {
    value: 'range_date',
    label: '时间区间'
  }
]
onMounted(() => {
  watchEffect(() => {
    if (entStore.advanceCondList.length && advanceCondList.value.length == 0) {
      advanceCondList.value = entStore.advanceCondList
      const key = selectOption()
      if (key) curFields.value = key
      appendOption()
    }
  })
})
const setVal = (val, index) => {
  if (value.value.value) {
    value.value.value[index] = val
  } else {
    value.value.value = []
    value.value.value[index] = val
  }
}
const isShowCondition = computed(() => {
  return (
    curFields.value.formType == 'text' ||
    curFields.value.formType == 'checkbox' ||
    curFields.value.formType == 'searchbox'
  )
})
const isShowConditionTime = computed(() => {
  return curFields.value.formType == 'range_date'
})
const selectOption = () => {
  return advanceCondList.value
    .flatMap((item) => item.children)
    .find((item) => item.id === value.value.id)
}

watch(
  () => value,
  (val) => {
    emit('updateValue', val.value, index.value)
  },
  {
    deep: true
  }
)
const typeChange = (item) => {
  curFields.value = item
  value.value.field = item.field
  value.value.queryType = item.queryType

  if (item.queryType == 'range') {
    value.value.value = [1, 100]
  } else if (item.queryType == 'range_date') {
    value.value.value = ['', '']
  } else {
    value.value.value = ''
  }
  value.value.formType = item.formType
  // 是/否选择
  if (item.queryType == 'is_or_not') {
    value.value.value = item.options[0].value
  }
  // 全部/任一
  if (item.queryType == 'in') {
    value.value.condition = 'in'
  }

  //时间就是时间区间
  if (item.queryType == 'range_date') {
    value.value.condition = 'range_date'
  }
  if (item.formType == 'searchbox') {
    value.value.attribute = item.attribute
  }
  value.value.id = item.id
  appendOption()
}

const appendOption = () => {
  // 地区
  if (curFields.value.field === 'area') {
    curFields.value.options = getAreaList()
  }
  // 行业
  if (curFields.value.field === 'industry') {
    let IndustryList = getIndustryList()
    IndustryList.map((item) => {
      item.disabled = true
    })
    curFields.value.options = IndustryList
  }
}

const validateField = ({ errmsg }) => {
  return new Promise((resolve, reject) => {
    if (value.value.value != '') {
      errMessage.value = ''
      resolve()
    } else {
      errMessage.value = errmsg
      reject('表单查询条件不完整')
    }
  })
}
defineExpose({ validateField })
</script>
<style lang="scss" scoped>
:deep.condtion-select {
  margin-right: 10px;
  .el-input {
    .el-input__inner {
      font-size: 12px;
    }
  }
}
.search-item {
  display: flex;
  margin-bottom: 0;
  position: relative;
  flex-wrap: nowrap;

  &.show-err {
    transition: margin-bottom 0.1s;
    margin-bottom: 16px;

    &::after {
      content: attr(errmsg);
      color: #f56c6c;
      position: absolute;
      left: 0;
      bottom: -18px;
      font-size: 12px;
      line-height: 16px;
    }
  }

  .mr-10 {
    margin-right: 10px;
  }

  .w-320 {
    width: 320px;
  }
}
</style>
